<script setup>
import { ref, onMounted } from "vue"
import { ossImg } from "@/utils/utils"
import { onHide, onLoad, onShareAppMessage, onUnload } from "@dcloudio/uni-app";
import { ShareConfig } from "@/campaign/pages/2023airycake/config";

const ruleModalVisible = ref(false)
const statusCode = ref(2)
const emdlz = getApp().emdlz

let enterTime = "";
let outTime = "";
let stayTime = "";

onShareAppMessage(() => ShareConfig())

onLoad((option) => {
  getApp().accessLogAdd();
  statusCode.value = +option.status || 2
})

onMounted((option) => {
  // 用户进入时间
  enterTime = new Date();
  console.log('-----------stayTime', '初始化了！')
})

const uploadStayTimeEvent = (evt) => {
  console.log('---------stayTimeEvt', evt)
  if (!enterTime) return
  // 用户退出时间
  outTime = new Date();
  //停留时间(毫秒)
  stayTime = (outTime?.getTime() - enterTime?.getTime()) / 1000;
  console.log('----------stayTime', stayTime)

  switch (statusCode.value) {
    case 1:
      // 活动已结束
      emdlz('track','event','oreo_cake_onepack_end_page','view','end_page',stayTime);
      break;
    case 2:
      // 服务器繁忙
      emdlz('track','event','oreo_cake_onepack_busy_page','view','busy_page',stayTime);
      break;
  }
}

onUnload(() => uploadStayTimeEvent('onBeforeMount'))
onHide(() => uploadStayTimeEvent('hide'))

const onOpenDialog = () => {
  switch (statusCode.value) {
    case 1:
      // 活动已结束
      emdlz('track','event','oreo_cake_onepack_end_page','click','check_end_rules','');
      break;
    case 2:
      // 服务器繁忙
      emdlz('track','event','oreo_cake_onepack_busy_page','click','check_rules2','');
      break;
  }
  ruleModalVisible.value = true
}

const onCloseDialog = () => {
  ruleModalVisible.value = false
}

const handleBackHome = () => {
  switch (statusCode.value) {
    case 1:
      emdlz('track','event','oreo_cake_onepack_end_page','click','back_universal1','');
      break;
    case 2:
      // 服务器繁忙
      emdlz('track','event','oreo_cake_onepack_busy_page','click','back_universal','');
      break;
  }
  setTimeout(() => {
    uni.switchTab({ url: "/pages/home/home" })
  }, 100)
}
</script>

<template>
  <view
    class="main-content"
    :style="{ backgroundImage: `url(${ossImg('others/2023cakeDiy/bg_1.png')})`,}"
  >
    <view class="w-375px flex justify-end mb-7px">
      <image
        class="w-40px h-44px mr-23px"
        :src="ossImg('others/2023cakeDiy/btn_rule.png')"
        @click.stop="onOpenDialog"
      ></image>
    </view>
    <image class="w-280px h-390px mb-28px" :src="ossImg(`others/2023cakeDiy/status_${statusCode}.png`)"></image>
    <image
      class="w-280px h-44px"
      :src="ossImg('others/2023cakeDiy/btn_back.png')"
      @click.stop="handleBackHome"
    ></image>
    <view v-if="ruleModalVisible" class="rule-modal">
      <image class="w-230px h-83px mt-60px relative z-11" :src="ossImg('others/2023cakeDiy/rule_title.png')"></image>
      <view class="rule-modal__body">
        <image
          class="w-20px h-20px absolute top-27px right-15px"
          :src="ossImg('others/2023cakeDiy/rule_close.png')"
          @click.stop="onCloseDialog"
        ></image>
        <scroll-view class="rule-text" :scroll-y="true">
          <image class="text-image" :src="ossImg('others/2023cakeDiy/rule_content.png')"></image>
          <!--          <image class="service-btn"></image>-->
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<style lang="less" scoped>
@import "@/static/css/theme.less";

.main-content {
  width: 100%;
  min-height: 724px;
  height: 100vh;
  overflow: hidden;
  background-color: #2960dd;
  background-position: top left;
  background-size: 100% 724px;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 93px;
  box-sizing: border-box;
}
.rule-modal {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .6);
    z-index: -1;
  }
  .rule-modal__body {
    width: 295px;
    height: 70%;
    overflow: scroll;
    background-color: white;
    position: relative;
    border: 4px solid #D4201B;
    border-radius: 22px;
    display: flex;
    align-items: center;
    flex-direction: column;
    box-sizing: border-box;
    margin-top: -24px;
    .rule-text {
      height: 500px;
      padding-top: 58px;
      padding-bottom: 24px;
      box-sizing: border-box;
      image {
        margin: 0 auto;
        display: block;
      }
      .text-image {
        width: 248px;
        min-height: 2463px;
      }
      .service-btn {
        width: 171px;
        height: 42px;
        margin-top: 38px;
        background-color: #0F40DE;
      }
    }
  }
}
</style>
